
<template>
  <div class="body-content">
    <Row :gutter="8">
      <Col :span="8" style="max-height: calc(100vh - 180px); overflow: auto;">
        <Menu :active-name="currentMenu" style="width: 100%;">
          <Submenu :name="'basic'">
            <template slot="title">
              <Icon type="ios-list" />
              {{lang.basic}}
            </template>
            <MenuItem v-for="(item,i) in data.basic" :key="i" :name="'basic'+i" @click.native="selectElement('basic',i)"
              >{{`${i}:${item.title}`}}<Icon style="float: right;color:red" type="md-remove" @click.native="removeBasic(i)"></Icon></MenuItem>
            <MenuItem name="new" @click.native="newAddBasic">{{lang.newBasic}}</MenuItem>
          </Submenu>
          <Submenu :name="k" v-for="k in Object.keys(data)" :key="k" v-if="k!=='basic'&&k!=='equipment'">
            <template slot="title">
              <Icon type="ios-list" />
              {{k}}
            </template>
            <MenuItem v-for="(item,i) in data[k]" :key="i" :name="k+i" @click.native="selectElement(k,i)"
              >{{`${i}:${item.title}`}}<Icon style="float: right;color:red" type="md-remove" @click.native="removeOther(k,i)"></Icon></MenuItem>
            <MenuItem name="new" @click.native="newAddOther(k)">{{lang.newOther}}</MenuItem>
          </Submenu>
          <MenuItem name="new">
            <cfg-field style="width:100%;" :labelStyle="{width:'80px'}" :label="lang.newDictionary" v-model="newDictionary"
              :config="{type:'text'}" :addField="true" @addField="addField"></cfg-field>
          </MenuItem>
        </Menu>
        <Card class="copywp">
        <div class="itemwp">
          <cfg-field :labelStyle="{width:'68px'}" label="key" v-model="formCopy.key" :mark="false"
            :config="{type:'select', options: dictionaryList}" />
          <cfg-field :labelStyle="{width:'40px'}" :label="lang.copyName" v-model="formCopy.name" :config="{type:'text'}" :mark="false" />
        </div>
        <div class="itemwp">
          <cfg-field :labelStyle="{width:'68px'}" :label="lang.copyParamName" v-model="formCopy.paramName" :config="{type:'text'}" :mark="false"/>
          <Button @click="copyField" style="text-align: right;" size="small">{{ lang.copyButton }}</Button>
        </div>
        </Card>
      </Col>
      <Col :span="16" style="padding:10px;">
        <div v-if="!!dictionary">
          <cfg-hier-dictionary :data="data[dictionary][elementIndex]"></cfg-hier-dictionary>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import CfgHierDictionary from "./cfg-hier-dictionary";
import cfgField from '../../../wizard/fields/cfg-field'
// import cfgField from '../../../wizard/fields/cfg-field'

export default {
  name: "cfg-hier-template-dictionary",
  components: {CfgHierDictionary,cfgField},
  data(){
    return {
      model:null,
      currentMenu:'',
      elementIndex:-1,
      newDictionary:'',
      dictionary:'',
      formCopy: {
        key: 'basic',
        name: 'copy1',
        paramName: 'code=W123'
      }
    }
  },
  props: {
    data: {
      default: () => {
        return {};
      }
    },
    modelType:{
      default: () => {
        return 'twinsDictionary';
      }
    }
  },
  computed: {
    lang() {
      return {
        "en-US": {
          basic: 'basic',
          newBasic: 'new basic Item',
          equipment: 'equipment',
          newDictionary: 'new dictionary',
          copyName: 'name',
          copyParamName: 'param name',
          newOther:'new item',
          copyButton: 'copy',
        },
        "zh-CN": {
          basic: '基础',
          newBasic: '新增基础条目',
          equipment: '设备',
          newDictionary: '新增字典',
          copyName: '名称',
          copyParamName: '参数名称',
          newOther:'新增条目',
          copyButton: '复制',
        },
      }[this.G_Locale];
    },
    basicTpl(){
      return this.$modelObject.getHierTpl()['basicTree']
    },
    otherTpl(){
      return this.$modelObject.getHierTpl()['basic']
    },
    dictionaryList() {
      return Object.keys(this.data).map(key=> ({
        label: key, value: key
      }))
    }
  },
  methods:{
    selectElement(menu,pos){
      this.currentMenu=menu+pos;
      this.dictionary=menu;
      this.elementIndex=pos;
    },
    removeBasic(pos){
      this.data.basic.splice(pos,1);
      this.elementIndex=-1;
    },
    newAddBasic(){
      let item = this.basicTpl
      this.data.basic.push(item);
      this.selectElement('basic', this.data.basic.length-1);
    },
    removeOther(key,pos){
      this.data[key].splice(pos,1);
      this.elementIndex=-1;
    },
    newAddOther(key){
      let item = {...this.otherTpl, model: "statistics"}
      this.data[key].push(item);
      this.selectElement(key, this.data[key].length-1);
    },
    addField(){
      if(!!this.newDictionary){
        this.$set(this.data,this.newDictionary,[])
      }
    },
    copyField() {
      if(this.formCopy.key && this.formCopy.name){
        try {
          let copyItem = this.data[this.formCopy.key]
          let paramName = this.formCopy.paramName.split('=')
          let valuesAddObj={}
          
          if (this.formCopy.paramName) {
            valuesAddObj = { [paramName[0]]: (paramName[1] || '') }
          }
          // if (paramName.length <2) return
          // let reg = new RegExp("(" + paramName[0] + ")='([\\D\\d]+)'")
          
          let newItem = copyItem.map(item => ({
            ...item,
            values: {...item.values, ...valuesAddObj}
            // condition: item.condition ? item.condition.replace(reg, `code='${paramName[1]}'`) : ''
          }))
          this.$set(this.data,this.formCopy.name, newItem)
          this.formCopy.name = ''
          // this.formCopy.paramName = ''
          console.log("🚀 ~ file: cfg-hier-template-dictionary.vue:128 ~ copyField:", copyItem, newItem, this.data, this.formCopy)
        } catch(err) {
          console.log("🚀 ~ file: cfg-hier-template-dictionary.vue:159 ~ copyField ~ err:", err)
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.body-content {
  padding: 2px;
  .copywp .ivu-card-body {
    padding: 8px;
  }
  .itemwp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0 8px;
    // border-right: 1px solid #dcdee2;
    .mapWrapper {
      color: #515a6e;
      &:nth-of-type(1) {
        margin-right: 8px;
      }
      flex: 1;
    }
    // .mapWrapper {
    //   background-color: '#fff';
    // }
    /deep/ .labelWrapper {
      background-color: '#fff';
      border: none;
    }
  }
}
</style>